<template>
    <div>
        <br />
        <el-card>
            <div class="page-common-top-filter">
                <div class="left">
                    <div class="page-common-filter-item">
                        <el-input v-model="filterSkcId" style="width: 200px" class="page-common-filter-content"
                            placeholder="商品ID" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input v-model="filterSkcName" style="width: 200px" class="page-common-filter-content"
                            placeholder="商品名称" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input v-model="filterSkuId" style="width: 200px" class="page-common-filter-content"
                            placeholder="skuId" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input v-model="filterSkuName" style="width: 200px" class="page-common-filter-content"
                            placeholder="sku名称" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input-number style="width: 200px" class="page-common-filter-content"
                            v-model="salesInventoryNumRange" :min="1" :controls="false" :max="3" placeholder="仓内可用库存在数量" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input-number style="width: 200px" class="page-common-filter-content"
                            v-model="unavailableWarehouseInventoryNumRange" :min="1" :controls="false" :max="3"
                            placeholder="仓内暂不可用库存" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input-number v-model="waitApproveInventoryNumRange" class="page-common-filter-content"
                            style="width: 200px" :min="1" :controls="false" :max="3" placeholder="待审核备货库存" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input-number v-model="waitDeliveryInventoryNumRange" class="page-common-filter-content"
                            style="width: 200px" :min="1" :controls="false" :max="3" placeholder="已下单待发货库存" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input-number v-model="waitReceiveNumRange" :min="1" class="page-common-filter-content"
                            style="width: 200px" :controls="false" :max="3" placeholder="已发货库存" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input-number v-model="vmiTransportationNumRange" class="page-common-filter-content"
                            style="width: 200px" :min="1" :controls="false" :max="3" placeholder="VIM备货单在途单数" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input-number v-model="vmiWaitDeliveryNumRange" class="page-common-filter-content"
                            style="width: 200px" :min="1" :controls="false" :max="3" placeholder="VIM备货单待发货数量" />
                    </div>
                </div>
                <div class="page-common-top-right-btn">
                    <el-button type="primary" @click="onSearch">搜索</el-button>
                    <el-button @click="onReset">重置</el-button>
                </div>
            </div>
            <div class="head-info">
                <span>仓内可用库存总数：{{ tableInfo.salesInventoryTotalNum }}</span>
                <span>仓内暂不可用库存：{{ tableInfo.unavailableWarehouseInventoryTotalNum }}</span>
                <span>仓内待审核备货库容总数：{{ tableInfo.waitApproveInventoryTotalNum }}</span>
                <span>已下单待发货库存总数：{{ tableInfo.waitDeliveryInventoryTotalNum }}</span>
                <span>已发货库存总数：{{ tableInfo.waitReceiveTotalNum }}</span>
                <span>VIM备货单在途单数总数：{{ tableInfo.vmiTransportationTotalNum }}</span>
                <span>VIM备货单待发货数量总数：{{ tableInfo.vmiWaitDeliveryNum }}</span>
            </div>
        </el-card>
        <br />
        <el-card>
            <div class="page-common-top-filter">
                <el-select v-model="mallId" placeholder="请选择 店铺" @change="mallIdsChange">
                    <el-option v-for="item in mallList" :key="item.mallId" :label="item.mallName"
                        :value="item.mallId + ''" />
                </el-select>
                <!-- <el-button type="primary">导出</el-button> -->
                <span
                    style="display: flex;align-items: center;margin: 0 10px;margin-right: auto;height:40px;">仅展示temu合商品不同库龄的库存数量</span>
                <el-progress v-if="!!mallId" :width="50" type="circle" :status="progressNum >= 100 ? 'success' : ''"
                    :percentage="progressNum" class="data-progress" />
            </div>
            <br />
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="基本信息" width="400">
                    <template v-slot="{ row }">
                        <div class="table-column-info">
                            <div class="left-info">
                                <img class="data-img" :src="row.skcImageUrl" />
                                <div class="info-line">
                                    <p><span class="t">商品ID：</span><span class="c">{{ row.skcId }}</span></p>
                                    <p><span class="t">商品名称：</span><span class="c">{{ row.skcName }}</span></p>
                                </div>
                            </div>
                            <!-- <div class="right-info">
                            <el-tag type="success">在途</el-tag>
                            <el-tag>在途在途</el-tag>
                            <el-button type="primary">Primary</el-button>
                        </div> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="temu仓内库存" align="center">
                    <template #default="scope">
                        <el-table :data="scope.row.skuInfo">
                            <el-table-column prop="skuId" label="skuID" />
                            <el-table-column prop="skuName" label="skuName" />
                            <el-table-column prop="salesInventoryNum" label="仓内可用库存" />
                            <el-table-column prop="unavailableWarehouseInventoryNum" label="仓内暂不可用库存" />
                            <el-table-column prop="waitReceiveNum" label="已发货库存" />
                            <el-table-column prop="waitDeliveryInventoryNum" label="已下单待发货库存" />
                            <el-table-column prop="waitApproveInventoryNum" label="待审核备货库存" />
                            <el-table-column prop="vmiTransportationNum" label="VIM备货单在途单数" />
                            <el-table-column prop="vmiWaitDeliveryNum" label="VIM备货单待发货数量" />
                        </el-table>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <Pagination :total="dataCount" :page="current" :limit="pageSize" @pagination="onPageChange" />
        </el-card>
    </div>
</template>


<script setup>
import { onMounted, ref, computed, reactive } from 'vue'
import { getVMIDataApi } from "@/api/pdd"
import { useUserStore } from '@/store/user'

const tableData = ref([])
const current = ref(1);
const pageSize = ref(10)
const dataCount = ref(0)
const mallId = ref('')
const progressNum = ref(0);
const tableInfo = reactive({
    salesInventoryTotalNum: 0,
    unavailableWarehouseInventoryTotalNum: 0,
    waitApproveInventoryTotalNum: 0,
    waitDeliveryInventoryTotalNum: 0,
    waitReceiveTotalNum: 0,
    vmiTransportationTotalNum: 0,
    vmiWaitDeliveryNum: 0,
})

const filterSkcId = ref('')
const filterSkcName = ref('')
const filterSkuId = ref('')
const filterSkuName = ref('')
const salesInventoryNumRange = ref(null)
const unavailableWarehouseInventoryNumRange = ref(null)
const waitApproveInventoryNumRange = ref(null)
const waitDeliveryInventoryNumRange = ref(null)
const waitReceiveNumRange = ref(null)
const vmiTransportationNumRange = ref(null)
const vmiWaitDeliveryNumRange = ref(null)
const userStore = useUserStore()

// 获取VIM数据
async function getVMIData() {
    const result = await getVMIDataApi({ filter: { ...getSearchParam() }, mallId: mallId.value, pageId: current.value, pageSize: pageSize.value });
    tableData.value = result.inventoryInfoList;
    dataCount.value = result.inventoryInfoTotalNum
    progressNum.value = result.loadPercent * 100;
    tableInfo.salesInventoryTotalNum = result.inventoryQuantityInfo.salesInventoryTotalNum;
    tableInfo.unavailableWarehouseInventoryTotalNum = result.inventoryQuantityInfo.unavailableWarehouseInventoryTotalNum;
    tableInfo.waitApproveInventoryTotalNum = result.inventoryQuantityInfo.waitApproveInventoryTotalNum;
    tableInfo.waitDeliveryInventoryTotalNum = result.inventoryQuantityInfo.waitDeliveryInventoryTotalNum;
    tableInfo.waitReceiveTotalNum = result.inventoryQuantityInfo.waitReceiveTotalNum;
    tableInfo.vmiTransportationTotalNum = result.inventoryQuantityInfo.vmiTransportationTotalNum;
    tableInfo.vmiWaitDeliveryNum = result.inventoryQuantityInfo.vmiWaitDeliveryNum;
    if (progressNum.value < 100) {
        getVMIData()
    }
}

function onSearch() {
    getVMIData()
}

function mallIdsChange(e) {
    mallId.value = e
    getVMIData()
}

const mallList = computed(() => {
    if (userStore.userInfo?.companyList && userStore.userInfo?.companyList[0]) {
        return userStore.userInfo.companyList[0].malInfoList
    } else {
        return []
    }
})

function onReset() {
    filterSkcId.value = ''
    filterSkcName.value = ''
    filterSkuId.value = ''
    filterSkuName.value = ''
    salesInventoryNumRange.value = ''
    unavailableWarehouseInventoryNumRange.value = ''
    waitApproveInventoryNumRange.value = ''
    waitDeliveryInventoryNumRange.value = ''
    waitReceiveNumRange.value = ''
    vmiTransportationNumRange.value = ''
    vmiWaitDeliveryNumRange.value = ''
    getVMIData()
}

// 获取筛选参数
function getSearchParam() {
    const temp = {}
    if (filterSkcId.value) {
        temp.skcId = filterSkcId.value
    }
    if (filterSkcName.value) {
        temp.skcName = filterSkcName.value
    }
    if (filterSkuId.value) {
        temp.skuId = filterSkuId.value
    }
    if (filterSkuName.value) {
        temp.skuName = filterSkuName.value
    }
    if (salesInventoryNumRange.value) {
        temp.salesInventoryNumRange = salesInventoryNumRange.value
    }
    if (unavailableWarehouseInventoryNumRange.value) {
        temp.unavailableWarehouseInventoryNumRange = unavailableWarehouseInventoryNumRange.value
    }
    if (waitApproveInventoryNumRange.value) {
        temp.waitApproveInventoryNumRange = waitApproveInventoryNumRange.value
    }
    if (waitDeliveryInventoryNumRange.value) {
        temp.waitDeliveryInventoryNumRange = waitDeliveryInventoryNumRange.value
    }
    if (waitReceiveNumRange.value) {
        temp.waitReceiveNumRange = waitReceiveNumRange.value
    }
    if (vmiTransportationNumRange.value) {
        temp.vmiTransportationNumRange = vmiTransportationNumRange.value
    }
    if (vmiWaitDeliveryNumRange.value) {
        temp.vmiWaitDeliveryNumRange = vmiWaitDeliveryNumRange.value
    }
    return temp
}

function onPageChange({ page, limit }) {
    current.value = page || 1;
    pageSize.value = limit
    getVMIData()
}


onMounted(() => {
    if (mallList.value.length > 0) {
        mallId.value = mallList.value[0].mallId + ''
    }
    getVMIData()
})

</script>

<style lang="scss" scoped>
.head-info {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 10px;

    span {
        margin-right: 20px;
        margin-bottom: 10px;
    }
}

.data-progress {
    :deep(.el-progress__text) {
        font-size: 15px !important;
    }
}

.table-column-info {
    width: 100%;
    display: flex;
    align-items: center;

    .right-info {
        width: 100px;
        display: flex;
        flex-wrap: wrap;
    }

    .left-info {
        flex: 1;
        display: flex;
        align-items: center;

        .data-img {
            width: 60px;
            height: 60px;
        }

        .info-line {
            font-size: 15px;
            font-weight: 600;
            margin-left: 5px;
            p {
                width: 100%;
                display: flex;
                .t {
                    width: 80px;
                }
                .c {
                    flex:1;
                }
            }
        }
    }
}
</style>